Upgrade to ExtJS 3.0.0 - Released 07/06/2009

[extjs.git] / docs / source / History.html (Case Conflict 1)
diff --git a/docs/source/History.html (Case Conflict 1) b/docs/source/History.html (Case Conflict 1)

new file mode 100644 (file)

index 0000000..a59fdc0
--- /dev/null
+++ b/docs/source/History.html (Case Conflict 1)
@@ -0,0 +1,94 @@
+<html>\r
+<head>\r
+  <title>The source code</title>\r
+    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
+    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
+</head>\r
+<body  onload="prettyPrint();">\r
+    <pre class="prettyprint lang-js">\r
+Ext.onReady(function() {\r
+    \r
+    // The only requirement for this to work is that you must have a hidden field and\r
+    // an iframe available in the page with ids corresponding to Ext.History.fieldId\r
+    // and Ext.History.iframeId.  See history.html for an example.\r
+    Ext.History.init();\r
+    \r
+    // Needed if you want to handle history for multiple components in the same page.\r
+    // Should be something that won't be in component ids.\r
+    var tokenDelimiter = ':';\r
+    \r
+    var tp = new Ext.TabPanel({\r
+        renderTo: Ext.getBody(),\r
+        id: 'main-tabs',\r
+        height: 300,\r
+        width: 600,\r
+        activeTab: 0,\r
+        \r
+        items: [{\r
+            xtype: 'tabpanel',\r
+            title: 'Tab 1',\r
+            id: 'tab1',\r
+            activeTab: 0,\r
+            tabPosition: 'bottom',\r
+            \r
+            items: [{\r
+                title: 'Sub-tab 1',\r
+                id: 'subtab1'\r
+            },{\r
+                title: 'Sub-tab 2',\r
+                id: 'subtab2'\r
+            },{\r
+                title: 'Sub-tab 3',\r
+                id: 'subtab3'\r
+            }],\r
+            \r
+            listeners: {\r
+                'tabchange': function(tabPanel, tab){\r
+                    Ext.History.add(tabPanel.id + tokenDelimiter + tab.id);\r
+                }\r
+            }\r
+        },{\r
+            title: 'Tab 2',\r
+            id: 'tab2'\r
+        },{\r
+            title: 'Tab 3',\r
+            id: 'tab3'\r
+        },{\r
+            title: 'Tab 4',\r
+            id: 'tab4'\r
+        },{\r
+            title: 'Tab 5',\r
+            id: 'tab5'\r
+        }],\r
+        \r
+        listeners: {\r
+            'tabchange': function(tabPanel, tab){\r
+                // Ignore tab1 since it is a separate tab panel and we're managing history for it also.\r
+                // We'll use its handler instead in that case so we don't get duplicate nav events for sub tabs.\r
+                if(tab.id != 'tab1'){\r
+                    Ext.History.add(tabPanel.id + tokenDelimiter + tab.id);\r
+                }\r
+            }\r
+        }\r
+    });\r
+    \r
+    // Handle this change event in order to restore the UI to the appropriate history state\r
+    Ext.History.on('change', function(token){\r
+        if(token){\r
+            var parts = token.split(tokenDelimiter);\r
+            var tabPanel = Ext.getCmp(parts[0]);\r
+            var tabId = parts[1];\r
+            \r
+            tabPanel.show();\r
+            tabPanel.setActiveTab(tabId);\r
+        }else{\r
+            // This is the initial default state.  Necessary if you navigate starting from the\r
+            // page without any existing history token params and go back to the start state.\r
+            tp.setActiveTab(0);\r
+            tp.getItem(0).setActiveTab(0);\r
+        }\r
+    });\r
+    \r
+});</pre>    \r
+</body>\r
+</html>
+\ No newline at end of file